import { Link, Warning } from '@brillout/docpress'
import { UseBati } from '../../components'
import { Example } from '../../components'

You can deploy Vike to [Vercel](https://vercel.com) simply by using a Vercel API Route. Alternatively, you can use `vite-plugin-vercel` for a full-fledged Vercel integration with ISR and Edge Middlewares.

We recommend using the Vercel API Route technique because it's a simple and sturdy integration. Later, if the need arises, you can switch to `vite-plugin-vercel`.

> <UseBati>Vercel</UseBati>


## API Route

You can integrate Vercel simply by creating a Vercel API Route `api/ssr.js` that server-side renders your app.

Example:
 - <Example timestamp="2024.03" repo="brillout/vike-with-vercel" />
<Warning>Make sure to properly set `OUTPUT DIRECTORY` in your Vercel dashboard, see the example's `README.md` instructions.</Warning>

> Using a Vercel API Route is a sturdy way to deploy to Vercel, as API Routes is a core Vercel feature: it's here to stay and, most importantly, stable. (Whereas Vercel's Build Output API is a moving target with occasional breaking changes.) Once you've set the server-side rendering API Route, you can expect it to work for the foreseeable future.


## vite-plugin-vercel

[`vite-plugin-vercel`](https://github.com/magne4000/vite-plugin-vercel) enables zero-configuration support for all Vercel features, including [Incremental Static Regeneration (ISR)](https://vercel.com/docs/concepts/incremental-static-regeneration/overview) and Edge Middlewares.

If you <Link text="pre-render your pages only partially" href="/prerender#partial" />, you can also use `vite-plugin-vercel` to statically deploy your pre-rendered pages while dynamically serving your non-prerendered pages.

> See Vike + `vite-plugin-vercel` installation instructions at [`vite-plugin-vercel` > Usage with Vike](https://github.com/magne4000/vite-plugin-vercel#usage-with-vike).

> Under the hood, `vite-plugin-vercel` uses Vercel's [Build Output API](https://vercel.com/docs/build-output-api/v3).


## Build Output API

For maximum flexibility and configuration options, you can directly use the [Build Output API](https://vercel.com/docs/build-output-api/v3).

Example:
 - <Example timestamp="2022.07" repo="brillout/vite-plugin-ssr_vercel_build-output-api" />
   > vite-plugin-ssr was the [previous name of Vike](https://vite-plugin-ssr.com/vike).


## Data APIs (GraphQL, RESTful, RPC)

Vercel API Routes only work on Vercel's platform; you cannot run them locally.

This means that you need to integrate your data layer twice:
 1. Using Vercel's API Routes, for Vercel deployment.
 1. Using a local server (e.g. Express.js), for development.

This is usually easy to achieve as most data layer tools integrate using a single HTTP endpoint. For example:
 - [GraphQL](https://graphql.org/) integrates over a single HTTP endpoint `/graphql`.
 - [Telefunc](https://telefunc.com/) integrates over a single HTTP endpoint `/_telefunc`.
 - [tRPC](https://trpc.io/) integrates over a single HTTP endpoint as well.

In other words, you can add a data layer by:
 - Creating a new Vercel API Route, integrating that single endpoint.
 - Creating a new route to your local development server (e.g. Express.js), integrating that single endpoint.

> When using SSR, we recommend using [RPC instead of GraphQL](https://telefunc.com/RPC-vs-GraphQL-REST), leading to a substantial simplification and increased development speed.
